<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <template id="loginTemp">
        <div v-if="flag">
            <button @click="changeFlag">改变</button>
            我是登录组件
        </div>
        <div v-else>
            <button @click="changeFlag">改变</button>
            啦啦啦
        </div>
    </template>




    <div id='app'>
        <button @click="flag=!flag">切换login</button>

        <login v-if='flag'></login>
        lala
        <login></login>
    </div>



    <script>
        // Vue.component()
        const vm = new Vue({
            el: '#app',
            data: {
                flag: true
            },
            beforeCreate() {
                console.log("实例 before create");
            },
            created() {
                console.log("实例 created");
            },
            beforeMount() {
                console.log("实例 before mount");
            },
            mounted() {
                console.log("实例 mountd");
            },
            components: {
                // 组件是一个独立的个体，它有自己的数据，也有自己的事件和生命周期
                login: {
                    template: '#loginTemp',
                    // 为什么组件的data需要定义成函数呢？
                    data() {
                        return {
                            flag: false
                        }
                    },
                    methods: {
                        changeFlag() {
                            this.flag = !this.flag
                        }
                    },
                    beforeCreate() {
                        console.log("组件 before create");
                    },
                    created() {
                        console.log("登录组件被创建");
                    },
                    beforeMount() {
                        console.log("组件 before mount");
                    },
                    mounted() {
                        console.log("组件 mountd");
                    },
                    beforeDestroy() {
                        console.log("被删除了");
                    },
                    // data:{
                    //     flag:true
                    // }
                }
            }
        })
    </script>
</body>

</html>